<template>
  <div class="callcenter-setting">
    <component
      v-show="!loading"
      :is="componentId"
      :status="status"
      :account-info="accountInfo"
      :current="current"
      @change-current="changeCurrent"
    ></component>
  </div>
</template>

<script>
import * as CallCenterApi from '@src/api/CallCenterApi';
import Apply from './components/Apply.vue';
import CallCenter from './components/CallCenter.vue';

const componentList = {
  [Apply.name]: Apply, // 未申请开通
  [CallCenter.name]: CallCenter, // 已审核
};

export default {
  inject: ['initData'],
  components: {
    ...componentList,
  },
  data() {
    return {
      // componentId: Auditing.name, // 当前展示的组件
      status: 0, // 0 未申请 1 审核中 2 已审核
      loading: false,
      accountInfo: null,
      current: (this.initData && this.initData.current) || 0,
    };
  },
  computed: {
    componentId() {
      return this.status === 2 ? CallCenter.name : Apply.name;
    },
  },
  beforeMount() {
    this.getAccountInfo();
  },
  methods: {
    async getAccountInfo() {
      if (this.loading) return;
      this.loading = true;
      try {
        const { code, message, result } = await CallCenterApi.getAccountInfo();
        this.loading = false;
        if (code !== 0 || !result) {
          // result为null未申请开通
          throw message;
        }
        this.accountInfo = result;
        // 审核状态：0待审核，1已审核
        this.status = result.verifyStatus === 0 ? 1 : 2;
      } catch (error) {
        this.status = 0; // 未开通
      } finally {
        this.loading = false;
      }
    },
    changeCurrent(e) {
      this.current = e;
    },
  },
};
</script>

.<style lang="scss">
.callcenter-setting {
  display: flex;
  flex-direction: column;
  .box {
    padding: 40px 84px 60px 84px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    box-sizing: border-box;
  }
}
</style>
